<div class="p-head">
    <b class="c3">修改头像</b>
    <div class="r">
        <a href="/bbs/index/3/" class="ajax" title="意见反馈">意见反馈</a>
    </div>
    <div id="desc">
        记录每天生活的点点滴滴。。。
    </div>
</div>
<div class="tabs_t tabs_n">
    <ul class="ajax" id="tabs_l">
        <li class=""><a href="/user/profile/">基本信息</a></li>                        
        <li><a href="/user/auth/">账号密码</a></li> 
        <li class="current"><a href="/user/face/">修改头像</a></li> 
    </ul>
    <span class="r clear">
    </span>
</div>
<link rel="stylesheet" href="<?= $config['res_url'] ?>/css/jquery.imgareaselect.css?v=<?= $config['version'] ?>" />
<style type="text/css">
    .avatar_editor{overflow:hidden;width:100%;margin:15px auto;display:block;}
    .avatar_editor .avatar_preview{float:left; margin:0 20px 0 0px;position:relative;}
    .avatar_editor .avatar_preview .avatar_selector{position:absolute;overflow:hidden;border-width:1px;display:none;cursor:e-resize;z-index:2;}
    .avatar_selector .selector_1{position:absolute;top:0;left:0;opacity:0;border:1px solid #FFF;}
    .avatar_selector .selector_2{position:absolute;top:0;left:0;opacity:0.5;border:1px solid #000;}
    .avatar_selector .selector_3{position:absolute;top:0;left:0;opacity:0.5;border:1px dashed #FFFFFF;}
    .avatar_editor .avatar_console{overflow:hidden;}
    .avatar_editor .avatar_submit{clear:both;margin:20px 0 10px;}
    .avatar_console .button{margin:10px 0 20px;}
    .avatar_console form{border-bottom:1px dashed #DDDDDD;margin-bottom:10px;}
    .lite_avatar{height:60px;display:block;clear:both;}
    .lite_avatar li{float:left;width:60px;height:50px;}
    .lite_avatar li .lite_image{overflow:hidden;width:50px;height:50px;border:1px solid #F0F0F0;}
    h4.title {margin-bottom:15px;}
    .m_desc {line-height: 22px;}
</style>
<div class="avatar_editor">
    <div class="avatar_preview">
        <img src="<?= $face160 ?>" id="bigimg" />
    </div>
    <div class="avatar_console">
        <?php
        if ($action) {
            $text = $action == 'success' ? '头像上传成功！请对图片进行微调，然后点击保存头像设置' : '头像上传失败！请重试！';
            echo "<div class='alert alert_{$action}'><a class='close' href='#'>×</a>{$text}</div>";
        }
        ?>
        <h4 class="title">1、从电脑中选择你喜欢的照片:</h4>
        <p class="silver">你可以上传JPG、JPEG或PNG文件。</p>
        <form method="POST" action="/user/face/upload" enctype="multipart/form-data" id="logoUpForm">
            <input type="file" class="file" name="avatar" id="avatar" />
            <p style="margin-top:15px;">
                <button type="submit" class="btn btn_g_s"><span><em>上传照片</em></span></button>
            </p>
        </form>
        <?php if ($img) { ?>
            <form method="POST" action="/user/face/thumb" id="posupdateForm">
                <h4 class="title">2、这是最终的显示效果，请在左侧用鼠标进行微调</h4>
                <ul class="lite lite_avatar">
                    <li><div class="lite_image"><img src="<?= $face160 ?>" id="preimg50" /></div></li>
                    <li><div class="lite_image" style="margin-top:20px;width:30px;height:30px;"><img src="<?= $face160 ?>" id="preimg30" /></div></li>
                </ul>
                <div class="m_desc">注：随意拖拽或缩放大图中的虚线方格，预览的小图即为保存后的头像图标。</div>
                <div class="avatar_submit">
                    <button type="submit" class="btn btn_g_s btn_user_form"><span><em>保存头像设置</em></span></button>
                </div>
                <input type="hidden" id="imgpos" value="<?= $face_pos ?>" />
            </form>
        <?php } ?>
    </div>
</div>
<?php if ($img) { ?>
    <div class="alert alert_block">
        <div class="alert_heading"><strong>温馨提示</strong></div>
        随意拖拽或调整大图中的虚线方格，预览的中图（50x50像素）及小图（30x30像素）即为保存后的头像图标。 <br />
        建议上传近距离的照片（比如大头照、特写），这样经过编辑后的头像会很清楚。 <br />
        保存成功后如果头像不改变，你可以多刷新几次页面即可。
    </div>
<?php } ?>
<script type="text/javascript">
    $(function() {
        $('#logoUpForm').submit(function() {
            if ($("#avatar").val() == "") {
                $.dialog.suggest("请选择要上传的图片！");
                return false;
            }
        });
        var img = "<?= $img ?>";
        if (img) {
            KS.user.face();
        }
    });
</script>
<script type="text/javascript">
    KS.common.load('user.form');
</script>